<template>
	<view class="phone">
		<view class="phone-tip">
			<view class="">
				<image src="../../static/jiami.png" mode=""></image>
			</view>
			<view> 号码已加密 </view>
			<view> 仅支持在平台内回拨</view>
			<view class=""> 今日可报名次数 <text>
					<slot></slot>
				</text> 次 </view>
			<view class="phone-tip-btn">
				<view @click="onclose"> 取消 </view>
				<view @click="makeSure"> 确认 </view>
			</view>
			<view> 为保证服务质量，您的通话可能被录音 </view>
		</view>
	</view>
</template>
<script>
	export default ({
		data() {
			return {}
		},
		methods: {
			onclose() {
				this.$emit('closePhone')
			},
			makeSure() {
				this.$emit('handleRight')
				this.onclose()
			}
		}
	})
</script>
<style scoped lang="scss">
	.phone {
		z-index: 99999;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.7);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;

		&-tip {
			width: 630rpx;
			height: 668rpx;
			background: #ffffff;
			border-radius: 24rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 138rpx;
				height: 166rpx;
				background: #ffffff;
				opacity: 0.9;
				margin-top: 32rpx;
			}

			&>view:nth-child(2) {
				margin-top: 56rpx;
				font-size: 36rpx;
				font-weight: 800;
				color: #515151;
				letter-spacing: 2rpx;
				opacity: 0.9;
				line-height: 48rpx;
			}

			&>view:nth-child(3) {
				font-size: 36rpx;
				font-weight: 800;
				color: #515151;
				opacity: 0.9;
				letter-spacing: 2rpx;
				line-height: 54rpx;
			}

			&>view:nth-child(4) {
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(255, 88, 31, 1);
				padding: 2rpx 34rpx 8rpx 36rpx;
				background: rgba(255, 88, 31, 0.1);
				border-radius: 12rpx;
				margin-top: 32rpx;

				&>text {
					font-size: 32rpx;
					font-weight: bold;
					margin: 0 12rpx;
				}
			}

			&-btn {
				display: flex;
				justify-content: space-between;
				margin: 60rpx 0 20rpx;
				width: 100%;

				&>view {
					width: 254rpx;
					height: 94rpx;
					border-radius: 12rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
				}

				&>view:first-child {
					color: #7F7F7F;
					background: #F1F1F5;
					margin-left: 30rpx;
				}

				&>view:last-child {
					color: #262626;
					font-weight: bold;
					background: #FCC92D;
					font-weight: bold;
					margin-right: 30rpx;
					box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(252, 201, 45, 0.3);
				}
			}

			&>view:last-child {
				font-size: 24rpx;
				font-weight: 400;
				color: #7F7F7F;
			}
		}
	}
</style>